<template>
  <div class="selectTagsIput" @click="getTags">
    <div class="input-big">
      <el-input class="search-input" size="small" placeholder="请选择标签" suffix-icon="el-icon-arrow-down"  style=" width: 300px" v-if="checkedData.length==0"/>
      <ul class="chooseList" v-else style="width: 300px">
        <li v-for="(item,index) in slectList" :key="index" v-if="index<2"><span>{{ item.label }}</span><i class="el-icon-close" @click.stop="delData(index,item.field)"></i></li>
        <li v-if="checkedData.length>2">...+{{checkedData.length-2}}</li>
        <i class="el-icon-circle-close" @click.stop="delAll"></i>
      </ul>
    </div>

    <el-dialog title="选择标签" :visible.sync="showTags" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="800px">
      <div class="radio-big">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">满足任意一个选中标签</el-radio>
          <el-radio :label="2">同时满足所有选中标签</el-radio>
        </el-radio-group>
      </div>

      <div class="dialog-big">
        <div class="dialog-left">
          <el-form>
            <div class="search-title">
              <div class="search">
                <el-input v-model="form.name" placeholder="搜标签组/标签名" clearable size="small"/>
                <el-button icon="el-icon-search" size="small" @click="upDataList"></el-button>
              </div>
            </div>
            <el-form-item v-for="(item, index) in dataList" :key="index" v-if="dataList && dataList.length>0">
              <div class="item-title">
                <i class="el-icon-caret-bottom" style="font-size: 16px; position: relative; top: 0px;margin-right: 10px; cursor: pointer;" :class="!item.showChild?`el-icon-caret-right`:``" @click="getShow(index)"></i>
                <el-checkbox
                  @change="(val) => handleCheckAllListChange(val, item)"
                  :indeterminate="itemIndeterminate(item)"
                  v-model="item.checkAll">
                  {{ item.label }}
                </el-checkbox>
              </div>
              <el-checkbox-group
                v-model="checkedData" @change="handleCheckedCitiesChange" v-if="item.showChild">
                <!--            显示以id为主，不然不回显-->
                <el-checkbox v-for="items in item.child" :key="items.field" :label="items.field">{{ items.label }}
                </el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-right">
          <div class="row-title">
            已选标签（{{ checkedData.length }}）
          </div>
          <ul class="tags">
            <li v-for="(item,index) in slectList" :key="index"><span>{{ item.label }}</span><i class="el-icon-close" @click="delData(index,item.field)"></i></li>
          </ul>
        </div>
      </div>

      <div class="footer-btn" slot="footer">
        <el-button type="primary" @click="handleCloseDialog">取消</el-button>
        <el-button @click="submitForm()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'selectAllTags',
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    chooseValue: {
      type: Array,
      default: () => {
        return [];
      }
    },
  },
  components: {},
  data() {
    return {
      showTags: false,
      value: false,
      input2: null,//标签名
      form: {
        type: 1,//选中
        name: '',//搜索名称
      },
      slectList: [],
      checkedData: [], //选择多选框时选中的值
    }
  },
  created() {
    if (this.chooseValue && this.chooseValue.length > 0) {
      this.checkedData = this.chooseValue;
    }
    this.slectList = [];
    this.dataList.forEach(item => {
      item.child.forEach(sitem => {
        if (this.checkedData.includes(sitem.field)) {
          this.slectList.push(sitem);
        }
      })
    })
  },
  mounted() {
  },
  watch: {
    // 深度监听
    checkedData: {
      handler(newVal, oldVal) {
        this.slectList = [];
        this.dataList.forEach(item => {
          item.child.forEach(sitem => {
            if (newVal.includes(sitem.field)) {
              this.slectList.push(sitem);
            }
          })
        })
      },
      deep: true
    },
  },
  methods: {
    getTags() {
      this.showTags = true;
    },
    delAll(){
      this.checkedData=[];
      this.dataList.forEach((vitem, vindex) => {
            vitem.checkAll=false; //必须要写
            this.itemIndeterminate(vitem);
      })

    },
    delData(index, id) {
      this.slectList.splice(index, 1);
      this.checkedData = this.checkedData.filter(item => item != id);//返回新的数据
      this.dataList.forEach((vitem, vindex) => {
        vitem.child.forEach((sitem, sindex) => {
          if(sitem.field==id){
            vitem.checkAll=false; //必须要写
            this.itemIndeterminate(vitem);
          }
        })
      })
    },
    upDataList() {
      let obj ={
        name:this.form.name,
        checkedData:this.checkedData,
        type:this.form.type,
      }
      this.$emit('getValue',obj);
    },
    submitForm(){
      let obj ={
        name:this.form.name,
        checkedData:this.checkedData,
        type:this.form.type,
      }
      this.$emit('getValue',obj);
      this.showTags = false;
    },
    getShow(index) {
      this.dataList[index].showChild = !this.dataList[index].showChild;
    },
    // 全选
    handleCheckAllListChange(val, item) {
      console.log('val', val);
      if (val) {
        //全选时
        item.child.forEach(sitem => {
          this.checkedData.push(sitem.field)
        })
      } else {
        item.child.forEach(sitem => {
          this.checkedData = this.checkedData.filter((vitem => {
            return sitem.field != vitem;
          }))
        })
      }
    },
    // 是否全选
    itemIndeterminate(item) {
      console.log('item', item);
      return !item.checkAll && item.child.some(sitem => this.checkedData.includes(sitem.field));
    },
    handleCheckedCitiesChange(val) {
      this.dataList.forEach(item => {
        item.checkAll = true;
        item.child.forEach(sitem => {
          if (!val.includes(sitem.field)) {
            item.checkAll = false;
          }
        });
      });
      this.$forceUpdate();

    },
    handleCloseDialog() {
      this.showTags = false;
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  display: flex;
  justify-content: flex-end;
}

.dialog-big {
  display: flex;

  .dialog-title {
    display: flex;
    background-color: #f9f9f9;
    height: 44px;
    align-items: center;
    outline: 1px solid #e9e9e9;
    padding: 0 16px;
    justify-content: space-between;
    box-sizing: border-box;
  }
}

::v-deep .el-dialog__body {
  overflow-y: auto;
  max-height: 600px;
  padding: 0px 20px 20px 20px;

  .el-form {
    padding: 0px;
    flex: 1;

    .search-title {
      display: flex;
      align-items: center;
      grid-gap: 8px;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid #eee;
    }

    .item-title {
      display: flex;
      align-items: center;
      height: 30px;
    }

    .el-form-item {
      margin: 10px;

      .el-checkbox__label {
        color: rgba(0, 0, 0, .65) !important;
      }

      .el-checkbox-group {
        padding-left: 50px;

      }
    }

  }

  .el-switch {
    margin-right: 10px;
  }
}

.addSpan {
  color: #3070ff;
  cursor: pointer;
}

.talList {
  display: flex;
  flex-direction: column;
  width: 120px;
  border-right: 1px solid #eee;

  li {
    list-style: none;
    padding: 8px 24px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;

    &.active {
      color: #3070ff;

      &:after {
        content: '';
        height: 100%;
        width: 2px;
        position: absolute;
        right: 0px;
        background: #3070ff;
        top: 0px;

      }
    }
  }
}

.search {
  display: flex;
  width: 100%;

  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }

  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}

.radio-big {
  padding: 20px 0px;
}

.dialog-left {
  border: 1px solid #eee;
  height: 500px;
  flex: 1;
}

.dialog-right {
  border: 1px solid #eee;
  height: 500px;
  width: 250px;
  margin-left: 10px;
  background: #fafafa;
}

.row-title {
  font-weight: 400;
  color: rgba(0, 0, 0, .85);
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  border-bottom: 1px solid #eee;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 0px 7px;

  li {
    display: flex;
    border: 1px solid #eee;
    height: 30px;
    align-items: center;
    font-size: 12px;
    padding: 0px 8px;
    margin-bottom: 10px;
    margin-right: 10px;

    i {
      margin-left: 10px;
      cursor: pointer;
    }

  }
}
.input-big {
  position: relative;
  .chooseList {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 7px;
    min-width: 240px;
    border: 1px solid #DCDFE6;
    height: 32px;
    border-radius: 5px;
    align-items: center;
    position: relative;
    .el-icon-circle-close{
      position: absolute;
      right: 2px;
      top: 7px;
      cursor: pointer;

    }
    li {
      display: flex;
      height: 24px;
      align-items: center;
      background: #f5f5f5;
      border: 1px solid #e9e9e9;
      font-size: 12px;
      padding: 0px 8px;
      margin-right: 10px;

      i {
        margin-left: 10px;
        cursor: pointer;
      }

    }
  }
}
.selectTagsIput {
  margin: 0px 10px;
}
</style>
